<template>
  <a-select
    show-search
    style="width: 100%" 
    v-model="selectModel" 
    :label-in-value="settings.labelInvalue" 
    :allowClear="settings.allowClear"
    :filter-option="filterOption"
    @change="handleChange">
    <a-select-option v-for="s in selectData" :key="s.id">
      {{ s.name }}
    </a-select-option>
  </a-select>
</template>

<script>
  import {
    getUrl
  } from '@/api/manage'
  export default {
    components: {
        VNodes: {
          functional: true,
          render: (h, ctx) => ctx.props.vnodes,
        },
      },
    props: {
      settings : {
         labelInvalue : false,
         showSearch  : false,
         defaultValue : '',
         allowClear : false,
         search : null,
         style : null,
         vModel: null,
         change: null,
         placeholder : '',
         url : '',
         params: {},
         id: ''
      }
    },
    data() {
      return {
          selectData: [],
          initValue : '',
          selectModel : ''
      }
    },
    created() {
      if(this.settings.placeholder != undefined){
          this.placeholder = this.settings.placeholder
      }
      if(this.settings.defaultValue){
          this.selectModel = this.settings.defaultValue
      }
      this.fetch(this.settings.url, this.settings.params)
    },
    methods: {
      fetch(url, params) {
        return getUrl(url, params)
          .then(data => {
            this.selectData = data.result
            // if(data &&  data.result[0] && data.result[0].sub2[0]){
            //   this.selectModel =  data.result[0].sub2[0].id
            //   this.handleChange(this.subject, '');
            //   this.$emit('afertInit');
            //   this.initValue = data.result[0].sub2[0].id
            // }
           
          })
      },
      handleChange(v1, v2){
         this.$emit('update:vModel',v1) 
         this.$emit('change',v1, v2, this.settings.id)
      },
      clear(){
        if(this.initValue){
          this.selectModel = this.initValue
          this.$emit('update:vModel', this.selectModel)
        }else{
             this.selectModel = []
        }
      },
      setValue(value){
        this.selectModel = value
        this.$emit('update:vModel', value)
        this.$emit('change', value)
      },
      setDefault(value){
        this.selectModel = value
      },
      filterOption(input, option) {
              return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              )
      }
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
  .ant-table-row{
    cursor:pointer;
  }
  .ant-slider-track {
      background-color: #079af5;
  }
</style>
